<template>
  <div class="echartsBox">
    <div v-if="JSON.stringify(obj) !== '{}'" id="statusLine" class="allWidthHeight" />
    <div v-else class="kong">暂无数据</div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      obj: {}
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    getInfo(data) {
      this.obj = data
      setTimeout(async () => {
        this.setStatusLine(data)
      }, 500)
    },
    /* 运行状态echarts */
    setStatusLine(data) {
      if (JSON.stringify(this.obj) !== '{}') {
        const option = {
          legend: {
            show: false
          },
          grid: {
            top: '4%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            splitLine: { show: false },
            axisTick: {
              show: false
            },
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              show: true,
              // 坐标轴 轴线
              lineStyle: {
                color: '#fff',
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: {
              show: true,
              color: '#fff',
              formatter: '{value}'
            }
          },
          yAxis: {
            splitLine: { show: false },
            axisTick: {
              show: false
            },
            type: 'category',
            data: ['离线', '停机', '待机', '运行'],
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              // 坐标轴 轴线
              lineStyle: {
                color: '#fff',
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: {
              color: '#fff',
              formatter: '{value}',
              interval: 0 // 代表显示所有x轴标签显示
            }
          },
          series: [
            {
              type: 'bar',
              data: [
                { value: data.offTime, itemStyle: { color: '#808080' } },
                { value: data.waitTime, itemStyle: { color: '#F83F00' } },
                { value: data.downTime, itemStyle: { color: '#FCBA62' } },
                { value: data.runningTime, itemStyle: { color: '#38AD7A' } }
              ],
              itemStyle: {
                borderRadius: [0, 5, 5, 0] // 这里设置圆角的大小
              }
              // data: [10, 30, 50, 78]
            }
          ]
        }
        if (
          this.myChart != null &&
          this.myChart !== '' &&
          this.myChart !== undefined
        ) {
          this.myChart.dispose() // 销毁
        }
        this.myChart = echarts.init(document.getElementById('statusLine'))
        this.myChart.clear()
        this.myChart.setOption(option, true)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.echartsBox {
  width: 100%;
  // padding: 0 20px;
  height: 50%;
}
</style>
